Ext.onReady(function() {

  Ext.QuickTips.init();

  var category = new Ext.ux.ComboBox({
        name         : 'category',// required！
        hiddenName   : name,// required！
        fieldLabel   : '分类',
        valueField   : 'name',// required！
        displayField : 'name',
        // value : '哲学',
        store        : new Ext.data.JsonStore({
              fields : [{
                    name : 'name'
                  }],
              data   : [{
                    'name' : '教育'
                  }, {
                    'name' : '哲学'
                  }, {
                    'name' : '文艺'
                  }]
            })
      });

  category.on({
        'select' : function(combo, rec) {
          var ctgy = rec.data.name;
          handleChange(ctgy);
        },
        'focus'  : function(combo) {}
      });

  var basicInfo = new Ext.form.FieldSet({
        title       : "基本信息",
        collapsible : true,
        layout      : 'column',
        items       : [{
              columnWidth : 0.5,
              layout      : 'form',
              defaults    : {
                xtype  : 'textfield',
                anchor : '95%'
              },
              items       : [{
                    fieldLabel : '书名',
                    name       : 'name'
                  }, category]
            }, {
              columnWidth : 0.5,
              layout      : 'form',
              defaults    : {
                xtype  : 'textfield',
                anchor : '95%'
              },
              items       : [{
                    fieldLabel : '作者',
                    name       : 'author'
                  }]
            }, {
              columnWidth : 0.24,
              layout      : 'form',
              items       : [{
                    fieldLabel : '上架日期',
                    name       : 'startDate',
                    xtype      : 'datefield',
                    format     : 'Y-m-d',
                    anchor     : '98%'
                  }]
            }, {
              columnWidth : 0.24,
              layout      : 'form',
              items       : [{
                    xtype      : 'timefield',
                    fieldLabel : '上架时间',
                    name       : 'startTime',
                    anchor     : '98%'
                  }]
            }]
      });

  var extraInfo = new Ext.form.FieldSet({
        title       : "额外信息",
        collapsible : true,
        layout      : 'column',
        items       : [{
              columnWidth : 0.33,
              layout      : 'form',
              defaults    : {
                xtype  : 'textfield',
                anchor : '95%'
              },
              items       : [{
                    fieldLabel : '教育',
                    name       : 'edu'
                  }, {
                    fieldLabel : '教育2',
                    name       : 'edu2'
                  }]
            }, {
              columnWidth : 0.33,
              layout      : 'form',
              defaults    : {
                xtype  : 'textfield',
                anchor : '95%'
              },
              items       : [{
                    fieldLabel : '哲学',
                    name       : 'philo'
                  }, {
                    fieldLabel : '哲学2',
                    name       : 'philo2'
                  }]
            }, {
              columnWidth : 0.33,
              layout      : 'form',
              defaults    : {
                xtype  : 'textfield',
                anchor : '95%'
              },
              items       : [{
                    fieldLabel : '文艺',
                    name       : 'art'
                  }, {
                    fieldLabel : '文艺2',
                    name       : 'art2'
                  }]
            }]
      });

  var formPanel = new Ext.form.FormPanel({
        labelWidth : 55,
        bodyStyle  : 'padding:0px 5px 0',
        autoHeight : true,
        padding    : 10,
        frame      : true,
        items      : [basicInfo, extraInfo]
      });

  var form = formPanel.getForm();

  var fm = Ext.form;
  var detailCM = new Ext.grid.ColumnModel([{
        header    : '教育',
        dataIndex : 'edu',
        editor    : new fm.TextField()
      }, {
        header    : '教育2',
        dataIndex : 'edu2',
        editor    : new fm.TextField()
      }, {
        header    : '哲学',
        dataIndex : 'philo',
        editor    : new fm.TextField()
      }, {
        header    : '哲学2',
        dataIndex : 'philo2',
        editor    : new fm.TextField()
      }, {
        header    : '文艺',
        dataIndex : 'art',
        editor    : new fm.TextField()
      }, {
        header    : '文艺2',
        dataIndex : 'art2',
        editor    : new fm.TextField()
      }, {
        header    : '时间',
        dataIndex : 'tmp',
        editor    : new Ext.ux.form.TimeField({
              name : 'tmp'
            })
      }]);

  var url = 'complex-form.data';
  var fields = ['edu', 'edu2', 'philo', 'philo2', 'art', 'art2', 'tmp'];

  var store = new Ext.data.Store({
        proxy     : new Ext.data.HttpProxy({
              method : 'GET',// 'POST'
              url    : url
            }),
        reader    : new Ext.data.JsonReader({
              root   : 'data',
              fields : fields
            }),
        listeners : {
          save   : function(store, rec, op) {},
          update : function(store, rec, op) {
            if (op == Ext.data.Record.COMMIT) {
              Ext.Msg.alert('信息', '保存成功');
            }
          }
        }
      });

  var btnAdd = new Ext.Button({
        text    : '添加',
        iconCls : 'table-add',
        handler : function() {
          var data = {};
          var len = fields.length;
          var field = '';
          for (var idx = 0; idx < len; idx++) {
            field = fields[idx];
            data[field] = field + '-' + idx;
          }
          var rec = new store.recordType(data);

          detailPanel.stopEditing();
          store.insert(0, rec);
          detailPanel.startEditing(0, 0);
        }
      });

  var detailPanel = new Ext.grid.EditorGridPanel({
        title            : '图书明细',
        clicksToEdit     : 1,
        cm               : detailCM,
        store            : store,
        height           : 200,
        enableColumnHide : false,
        tbar             : [btnAdd, {
              text    : 'test',
              handler : function() {
                alert(Ext.encode(getGridData()));
              }
            }, '->', {
              text    : 'save: insert',
              handler : function() {
                store.save();
              }
            }, {
              text    : 'save: update',
              handler : function() {
                store.commitChanges();
              }
            }]
      });

  function getGridData() {
    var recs = [];
    var len = store.getCount();
    for (i = 0, cnt = len; i < cnt; i += 1) {
      var rec = store.getAt(i);
      recs.push(rec.data);
    }

    return recs;
  }

  var win = new Ext.Window({
    width           : 800,
    modal           : true,
    border          : false,
    shadow          : false,
    autoHeight      : true,
    autoScroll      : true,
    closeAction     : 'hide',
    constrainHeader : true,
    title           : '图书信息',
    items           : [formPanel, new Ext.Spacer({
              height : 5
            }), detailPanel, new Ext.ux.StatusBar({
              style : 'padding:10px',
              text  : '',
              items : ['制单人: admin', '-', '制单日期: ' + new Date().format('Y-n-d')]
            })],
    buttons         : [{
          text    : '提交',
          handler : function() {
            var frm = formPanel.getForm();
            alert(Ext.encode(frm.getValues(false)));
          }
        }, {
          text    : '取消',
          handler : function() {
            win.hide();
          }
        }]
  });

  new Ext.Button({
        renderTo : Ext.getBody(),
        style    : 'margin:50px',
        text     : 'Just test it',
        handler  : function() {
          win.show();

  (function() {
            var category = form.findField('category').getValue();
            handleChange(category);
          }).defer(1000);
        }
      });

  // ================================================================

  function handleChange(ctgy) {
    switch (ctgy) {
      case '教育' : {
        hideFields('philo', 'philo2', 'art', 'art2');
        showColumns('edu', 'edu2');
      }
        break;
      case '哲学' : {
        hideFields('edu', 'edu2', 'art', 'art2');
        showColumns('philo', 'philo2');
      }
        break;
      case '文艺' : {
        hideFields('philo', 'philo2', 'edu', 'edu2');
        showColumns('art', 'art2');
      }
        break;
    }
  }

  function hideFields() {
    var fields = arguments ? Array.prototype.slice.call(arguments) : [];
    handleFileds(fields, false);
  }

  function showColumns() {
    var dataIndex = arguments ? Array.prototype.slice.call(arguments) : [];

    var colIdx = [];
    var len = dataIndex.length;
    for (var i = 0; i < len; i++) {
      colIdx.push(detailCM.findColumnIndex(dataIndex[i]));
    }

    var colLen = detailCM.getColumnCount();
    for (var i = 0; i < colLen; i++) {
      if (colIdx.indexOf(i) != -1) {
        detailCM.setHidden(i, false);
      } else
        detailCM.setHidden(i, true);
    }

    // resetExclude(dataIndex);
  }

  function handleFileds(fields, flag) {
    form.items.each(function(item, idx) {
          if (fields.indexOf(item.getName()) != -1) {
            item.setVisible(flag);
            item.el.up('.x-form-item').setDisplayed(flag);
            item.setValue('');
            item.allowBlank = !flag;
          } else {
            item.setVisible(!flag);
            item.el.up('.x-form-item').setDisplayed(!flag);
            item.allowBlank = flag;
          }
        });
  }

  function showFields() {
    var fields = arguments ? Array.prototype.slice.call(arguments) : [];
    handleFileds(fields, true);
  }

  function resetExclude(dataIndex) {
    var exDataIndx = [];// hidden columns dataindex
    Ext.each(detailCM.config, (function(item) {
          if (dataIndex.indexOf(item.dataIndex) == -1) {
            exDataIndx.push(item.dataIndex);
          }
        }));

    var exLen = exDataIndx.length;
    var storeLen = store.getCount();
    for (i = 0, cnt = storeLen; i < cnt; i += 1) {
      var rec = store.getAt(i);
      for (var j = 0; j < exLen; j++) {
        rec.set(exDataIndx[j], '');
        rec.commit();
      }
    }
  }
});